<template>
	<view>
		<view class="container">
			<view class="information_list">
				<view class="information_name">手机</view>
				<input class="information_inner" type="text" v-model="form.phone" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>真实姓名</view>
				<input class="information_inner" type="text" v-model="form.username" />
			</view>
			<view class="information_list">
				<view class="information_name">支付宝姓名</view>
				<input class="information_inner" type="text" v-model="form.aliName" />
			</view>
			<view class="information_list">
				<view class="information_name">支付宝账户</view>
				<input class="information_inner" type="text" v-model="form.aliPay" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>开户行</view>
				<input class="information_inner" type="text" v-model="form.bankName" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>开户地</view>
				<input class="information_inner" type="text" v-model="form.bankLocation" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>银行账户姓名</view>
				<input class="information_inner" type="text" v-model="form.bankNickName" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>银行卡号</view>
				<input class="information_inner" type="text" v-model="form.bankNo" />
			</view>
			<view class="information_list">
				<view class="information_name">微信</view>
				<input class="information_inner" type="text" v-model="form.wxNo" />
			</view>
			<view class="information_list">
				<view class="information_name">微信账户姓名</view>
				<input class="information_inner" type="text" v-model="form.wxName" />
			</view>
			<view class="information_list">
				<view class="information_name"><text class="red_color">*</text>验证码</view>
				<input class="information_inner" type="text" v-model="form.verCode" />
				<text class="ver_code">获取验证码</text>
			</view>
			
			<button class="add-btn" @click="confirm">保存资料</button>
		
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '13333333333',
					username: '哈哈哈',
					aliName: '哈哈哈',
					aliPay:'',
					whichBank: '',
					bankPlace: '',
					bankName: '',//开户行
					bankNo: '',
					bankLocation:'',//开户地
					bankNickName:'',//开户人姓名
					wxNo: '',
					wxName: '',
					verCode: '',
				}
			};
		},
		onLoad() {
			this.getprofile();	
		},
		
		methods: {
			
			getprofile(){
				
				let that = this
				that.$api.request('/api/web/','/getUserData',{
					
				}, failres => {
					console.log("failres",failres);
					
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					console.log("then res",res);
					that.form=res.data;
					
				console.log(": " + JSON.stringify(res));
				
				})
			},
			confirm(){
				
				let that = this
				that.$api.request('/api/web','/changeUserData',{
					'phone':that.form.phone,
					'username':that.form.username,
					'aliName':that.form.aliName,
					'aliPay':that.form.aliPay,
					'bankName':that.form.bankName,
					'bankLocation':that.form.bankLocation,
					'bankNickName':that.form.bankNickName,
					'bankNo':that.form.bankNo,
					'wxName':that.form.wxName,
					'wxNo':that.form.wxNo
				}, failres => {
					console.log("failres",failres);
					
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					console.log("then res",res);
					//that.form=res.data;
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				
				})
				uni.switchTab({
				    url: '/pages/user/user'
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.information_list{
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		border-bottom: 1upx solid #efefef;
		display: flex;
		align-items: center;
		position: relative;
		.information_name{
			font-size: 28upx;
			color: #333333;
			margin-left: 20upx;
			width: 200upx;
			.red_color{
				color: red;
				margin-right: 10upx;
			}
		}
		.information_inner{
			outline: none;
		}
		.ver_code{
			position: absolute;
			right: 30upx;
			font-size: 28upx;
			padding: 5upx 10upx;
			border: 1upx solid #EBEEF5;
			border-radius: 5upx;
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}


</style>
